<template>
  <el-dialog v-model="dialogFormVisible" title="请输入邀请对象的信息" width="500">
    <el-form :model="form" label-position="left">
      <el-form-item :label-width='formLabelWidth' label="邀请对象的手机号：">
        <el-input v-model="form.phone" autocomplete="off"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue'
import axios from 'axios'
import {ElMessage} from 'element-plus'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
  team_id: '',
  phone: '',
  team_name: '',
  web_hook_url: ''
})


// 提供一个方法来控制对话框的显示
const openDialog = (row) => {
  dialogFormVisible.value = true
  form.team_id = row.Team.id
  form.team_name = row.Team.name // 将团队名称传递给表单
  form.web_hook_url = row.Team.address // 将团队的webhook地址传递给表单
}

// 提交表单的方法
const submitForm = async () => {
  console.log("提交的表单数据:", form);
  try {
    // 发送 JSON 格式的表单数据
    const response = await axios.post('team/inviteMember', form);

    // 从响应中获取 code 和 message
    const {code, message} = response;
    console.log(code, message);

    if (code === 1) {
      // 团队添加成功
      ElMessage.success({
        message: '团队添加成功',
        duration: 1000,
        onClose: () => {
          // 关闭表单并清空内容
          dialogFormVisible.value = false;
          form.team_name = '';
          form.address = '';
        }
      });
    } else if (code === 0) {
      // 该团队您已经建立过了
      ElMessage.warning({
        message: '发送邀请消息失败，用户可能不存在',
        duration: 2000
      });
    } else if (code === -1) {
      // 插入失败，数据库崩溃，请联系管理员
      ElMessage.error({
        message: '插入失败，数据库崩溃，请联系管理员',
        duration: 2000
      });
    } else {
      // 其他情况
      ElMessage.error({
        message: '未知错误，请稍后再试',
        duration: 2000
      });
    }
  } catch (error) {
    // 网络或其他错误
    if (error.response) {
      // 后端返回了错误响应
      const {code, message} = error.response;
      ElMessage.error({
        message: message || '网络错误，请稍后再试',
        duration: 2000
      });
    } else {
      // 其他错误（如网络问题）
      ElMessage.error({
        message: '网络错误，请稍后再试',
        duration: 2000
      });
    }
  }
};

// 定义一个事件来暴露 openDialog 方法
defineExpose({
  openDialog
})
</script>